HTML <article> tag
The <article> tag is a semantic tag that describes its meaning to both the developer and the browser. It specifies independent, self-contained content that doesn’t require any other context. An article makes sense on its own and can be distributed independently from the rest of the website. These tags are perfect for presenting Microdata information.
The <article> tag is mostly used in two contexts: on a page consisting of only one piece of content, and on a page such as a search results page or a blog index page, where multiple <article> elements are used to contain individual pieces of content.
Some potential sources for article elements can be:
- Blog entry
- Comment submitted by a user
- Newspaper/Magazine article
- Forum Post
Note: The article element does not render anything special in a browser. By default, the article element is of block-level.
The article is mostly used in two contexts :
- On a page consisting of only one piece of content, a single <article> element is used to contain the main content and separate it off from rest of the page.
- On a page such as a search results page, a blog index page etc, multiple <article> elements are used to contain individual pieces of content.
Example: This example shows the use case of the <article> tag on our web page.
<!DOCTYPE html>
<html>
<head>
<style>
article {
background-color: rgb(236, 233, 233);
width: 300px;
border: 2px solid black;
padding: 5px;
border-radius: 10px;
margin: auto;
box-sizing: border-box;
}
img {
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<article>
<img src=
"https://media.w3wiki.org/wp-content/uploads/20220120191044/logo-200x145.png"
alt="GfG Logo">
<h1>w3wiki</h1>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well-explained computer science
and programming articles, quizzes,
and live courses
</p>
</article>
</body>
</html>
Output:
Differentiate between , & tags in HTML
HTML is a language full of diverse elements, and three such elements are the <article>, <p>, and <section> tags. These semantic tags, while similar, each have unique uses and meanings within an HTML document.
The article tag is used for the independent content, p tag for paragraph and section for different section of the document.
Tags in HTML are keywords where every specific single tag has some unique meaning.